import config from '../../../config/config'

const prefixCls = config.prefix + '-circle-progress'
const module = {
  name: config.prefix + '-circle-progress',
  components: {},
  props: {
    size: {
      type: Number,
      default: 120
    },
    strokeColor: {
      type: String,
      default: '#ffcb63'
    },
    strokeLinecap: {
      type: String,
      default: 'round'
    },
    trailColor: {
      type: String,
      default: '#efefef'
    },
    percent: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {}
  },
  methods: {},
  computed: {
    circleSize () {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`
      }
    },
    radius () {
      return 50 - 6 / 2
    },
    pathString () {
      return `M 50,50 m 0,-${this.radius}
            a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
            a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`
    },
    len () {
      return Math.PI * 2 * this.radius
    },
    pathStyle () {
      return {
        'stroke-dasharray': `${this.len}px ${this.len}px`,
        'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
        transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
      }
    },
    fontStyle () {
      return {
        'margin-top': `-${this.size / 2 + 20}px`,
        'margin-left': '10px',
        color: this.percent === 0 ? this.trailColor : this.strokeColor
      }
    },
    wrapClasses () {
      return [
                `${prefixCls}`
      ]
    },
    circleInner () {
      return `${prefixCls}-inner`
    }
  },
  watch: {
    percent () {
      if (this.percent >= 100) {
        this.strokeColor = '#32CD32'
      } else {
        this.strokeColor = '#ffcb63'
      }
    }
  },
  created () {
  }
}
export default module
